<template>
<div class="block my-apps">
  <div class="block-title">我的应用</div>
  <div class="block-content">
    <xdh-grid class="apps"  :data="myApps" direction="row" justify="flex-start" wrap="wrap">
      <div class="app-wrap" slot-scope="scope">
        <div class="app">
          <div class="app-icon" @click="appClickHandle(scope.item)">
            <div class="inner">
              <em :class="{'iconfont': true, 'icon-component': scope.item.name=='more' ? false : true, 'icon-plus': scope.item.name=='more' ? true : false}"></em>
            </div> 
          </div>
          <p class="app-name">{{scope.item.label}}</p>
        </div>
      </div>
    </xdh-grid>  
  </div>
  
  <xdh-slide-panel title="应用商店" width="700px" 
    :show-handle = "false"
    :append-to="panelEl"
    :click-outside = "true"
    :collapsed.sync="closeMorePanel" position="right" >
  </xdh-slide-panel>
</div>
</template>

<style lang="scss" scoped>
@import "../../style/_mixin.scss";
// @import "mixin";
.my-apps{
  .apps{
    height: 100%;
    // padding: 10px 0;
    /deep/ .xdh-grid__item{
      flex: 0 0 16%;
      width: 16%;
      height: 48%;
      
      .app-wrap{
        display: flex;
        width: 100%;
        height: 100%;
        // max-width: 100px;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        .app{
          margin: 0 auto;
          width: 98%;
          &-icon{
            position: relative;
            margin: 0 auto;
            width: 48%;
            padding-top: 48%;
            
            .inner{
              position: absolute;
              display: flex;
              width: 100%;
              height: 100%;
              left: 0;
              bottom: 0;
              align-items: center;
              justify-content: center;
              border: 1px solid rgb(238, 235, 235);
              border-radius: 10px;
            }
          }
          &-name{
            padding: 0;
            margin:0;
            line-height: 1.4;
            text-align: center;
            width: 100%;
            @include ellipsis()
          }
        }
      }
    }
  }
   
}
.block{
  display: flex;
  height: 100%;
  border-radius: 8px;
  background: white;
  overflow: hidden;
  flex-flow: column;
  &-title{
    flex: 0 0 auto;
    padding: 0 5px;
    line-height: 2;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
  }
  &-content{
    flex: 1;
    padding: 5px;
  }
}
</style>

<script>
import XdhGrid from '@/widgets/xdh-grid'
import XdhSlidePanel from '@/widgets/xdh-slide-panel'
import {APP_CASE_HOST, APP_ADMIN_HOST} from '@/config.js'
const APPS = [
  { name: 'case', label: '我的案件', url: APP_CASE_HOST },
  // { name: 'detective', label: '研判工作台', url: APP_CASE_HOST },
  { name: 'admin', label: '控制平台', url: APP_ADMIN_HOST },
  { name: 'mycase', label: '我的案件', url: APP_CASE_HOST },
  { name: 'detective', label: '研判工作台', url: APP_CASE_HOST },
  { name: 'admin', label: '控制平台', url: APP_ADMIN_HOST },
  { name: 'mycase', label: '我的案件', url: APP_CASE_HOST }

]
export default {
  name: 'myApps',
  components: {
    XdhGrid,
    XdhSlidePanel
  },
  props: {
    panelEl: {
      type: HTMLElement,
      default: null
    }
  },
  data() {
    return {
      myApps: [
        ...APPS,
        { label: '更多', name: 'more', url: '' }
      ],
      closeMorePanel: true
    }
  },
  watch: {
    
  },
  methods: {
    appClickHandle(app) {
      if (app.name === 'more') {
        this.closeMorePanel = false
      } else {
        this.$emit('on-app-open', app)
      }
    }
  },
  mounted() {
  }
}
</script>

